import { ProgressDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Progress);

## Usage

<Demo data={ProgressDemos.usage} />

## Compound components

<Demo data={ProgressDemos.compound} />

## With tooltips

<Demo data={ProgressDemos.tooltips} />

## Section width transition

Set `transitionDuration` to a number of ms to enable width transition:

<Demo data={ProgressDemos.transition} />

## Example: progress with segments

<Demo data={ProgressDemos.segments} />

<StylesApiSelectors component="Progress" />

<Demo data={ProgressDemos.stylesApi} />

## Accessibility

- Progress section has `role="progressbar"` attribute
- Progress section has `aria-valuenow` attribute with current value
- `aria-valuemin` and `aria-valuemax` attributes are always set to `0` and `100` as component does not support other values

Set `aria-label` attribute to label progress:

```tsx
import { Progress } from "@mantine/core";

function Demo() {
  return <Progress aria-label="Uploading progress" value={10} />;
}

function DemoCompound() {
  return (
    <Progress.Root>
      <Progress.Section aria-label="Uploading progress" value={10} />
    </Progress.Root>
  );
}
```
